[V0_FILE]typescriptreact:file="components/kokonutui/card-08.tsx" isMerged="true" import { cn } from "@/lib/utils" import { ArrowUpRight } from "lucide-react" import Image from "next/image" import Link from "next/link" export interface Card08Props { title?: string subtitle?: string image?: string badge?: { text: string variant: "pink" | "indigo" | "orange" } href?: string } export default function Card08({ title = "Modern Design Systems", subtitle = "Explore the fundamentals of contemporary UI design", image = "https://ferf1mheo22r9ira.public.blob.vercel-storage.com/profile-mjss82WnWBRO86MHHGxvJ2TVZuyrDv.jpeg", badge = { text: "New", variant: "orange" }, href = "https://kokonutui.com/", }: Card08Props) { return (

{badge.text}

{title}

{subtitle}

) } [V0_FILE]typescriptreact:file="app/page.tsx" import CardGrid from "@/components/kokonutui/card-grid" export default function Home() { // Sample collection data const collections = [ { title: "Summer Dress Collection", subtitle: "Fit with the latest trends", image: "https://assets.lummi.ai/assets/QmVQpR9kUDEiFupgWrzaUYVii2TLa5zE7h9XDU7okBFdyc?auto=format&w=450", badge: { text: "New", variant: "orange", }, }, { image: "https://assets.lummi.ai/assets/QmXFtkNH6GJy581VwChHZeQF6qfQM9bkLhF2kDh1px5qKB?auto=format&w=1500", title: "Autumn Essentials", subtitle: "Warm and cozy for the colder months", badge: { text: "New", variant: "orange", }, }, { image: "https://www.lummi.ai/api/pro/image/a06ede0d-63fb-4d99-be4c-9ba0840cf779?asset=original&cb=1nK52A&auto=format&w=1500", title: "Winter Collection", subtitle: "Colorful for the festive season", badge: { text: "New", variant: "orange", }, }, { image: "https://assets.lummi.ai/assets/QmPdy3qFqQF8gDQ6KuuUrRaqez3cbdeaYw3GMrxBynLfGd?auto=format&w=1500", title: "Spring Accessories", subtitle: "Hidden treasures for the spring season", badge: { text: "New", variant: "orange", }, }, { image: "https://assets.lummi.ai/assets/QmVQpR9kUDEiFupgWrzaUYVii2TLa5zE7h9XDU7okBFdyc?auto=format&w=450", title: "Holiday Special", subtitle: "Simple.", badge: { text: "New", variant: "orange", }, }, ] return (

) } [V0_FILE]typescriptreact:file="components/kokonutui/card-grid.tsx" isEdit="true" import Card08, { type Card08Props } from "./card-08" interface CardGrid { items: Card08Props[] gridTitle?: string } const collections: Card08Props[] = [ { title: "Summer Dress Collection", subtitle: "Fit with the latest trends", image: "https://assets.lummi.ai/assets/QmVQpR9kUDEiFupgWrzaUYVii2TLa5zE7h9XDU7okBFdyc?auto=format&w=450", badge: { text: "New", variant: "orange", }, }, { image: "https://assets.lummi.ai/assets/QmXFtkNH6GJy581VwChHZeQF6qfQM9bkLhF2kDh1px5qKB?auto=format&w=1500", title: "Autumn Essentials", subtitle: "Warm and cozy for the colder months", badge: { text: "New", variant: "orange", }, }, { image: "https://www.lummi.ai/api/pro/image/a06ede0d-63fb-4d99-be4c-9ba0840cf779?asset=original&cb=1nK52A&auto=format&w=1500", title: "Winter Collection", subtitle: "Colorful for the festive season", badge: { text: "New", variant: "orange", }, }, { image: "https://assets.lummi.ai/assets/QmPdy3qFqQF8gDQ6KuuUrRaqez3cbdeaYw3GMrxBynLfGd?auto=format&w=1500", title: "Spring Accessories", subtitle: "Hidden treasures for the spring season", badge: { text: "New", variant: "orange", }, }, { image: "https://assets.lummi.ai/assets/QmVQpR9kUDEiFupgWrzaUYVii2TLa5zE7h9XDU7okBFdyc?auto=format&w=450", title: "Holiday Special", subtitle: "Simple.", badge: { text: "New", variant: "orange", }, }, ] export default function CardGrid({ items = collections, gridTitle = "Collections 2025 - Summer" }: CardGrid) { if (!items || items.length === 0) { return (

No items to display.

) } return (

{gridTitle && (

{gridTitle}

)}

Explore the latest collections for the summer season.

{items.map((item, index) => ( ))}

) } [V0_FILE]typescriptreact:file="components/kokonutui/card/card-08.tsx" isDeleted="true" import { cn } from "@/lib/utils" import { ArrowUpRight } from "lucide-react" import Image from "next/image" import Link from "next/link" export interface Card08Props { title?: string subtitle?: string image?: string badge?: { text: string variant: "pink" | "indigo" | "orange" } href?: string } export default function Card08({ title = "Modern Design Systems", subtitle = "Explore the fundamentals of contemporary UI design", image = "https://ferf1mheo22r9ira.public.blob.vercel-storage.com/profile-mjss82WnWBRO86MHHGxvJ2TVZuyrDv.jpeg", badge = { text: "New", variant: "orange" }, href = "https://kokonutui.com/", }: Card08Props) { return (

{badge.text}

{title}

{subtitle}

) }

About

Tags

Share

About

Tags

Share

More from kokonut

More Templates Like This